<!--
 * @Descripttion: 我的站点
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-10 11:17:58
 * @LastEditors: GW
 * @LastEditTime: 2021-09-03 08:51:25
-->
<template>
    <div class="website-wrapper">
        <a-tabs :activeKey="activeKey" @change="tabsCallback">
            <a-tab-pane key="1" tab="基本设置">
                <div class="content-box">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-model-item label="首页SEO标题">
                                    <a-input v-model="defaultSetData.seoTitle" />
                                </a-form-model-item>
                                <a-form-model-item label="网站LOGO">
                                    <a-input v-model="defaultSetData.logoUrl" />
                                    <div>
                                        <span class="margin-right-20">高:50px 宽:130px</span>比例：1:2.6
                                        <a-upload :action="this.$Global.ApiBaseUrl + '/uploadFile'" :headers="headersData" list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChange">
                                            <div>
                                                <a-icon type="plus" />
                                                <div class="ant-upload-text">
                                                    上传图片
                                                </div>
                                            </div>
                                        </a-upload>
                                        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelImg">
                                            <img alt="example" style="width: 100%" :src="previewImage" />
                                        </a-modal>
                                    </div>
                                </a-form-model-item>
                                <a-form-model-item label="网站关键词">
                                    <a-input v-model="defaultSetData.keyword" />
                                </a-form-model-item>
                                <a-form-model-item label="网站描述">
                                    <a-input v-model="defaultSetData.remarks" />
                                </a-form-model-item>
                                <a-form-model-item label="版权信息">
                                    <a-input v-model="defaultSetData.copyrightInfo" />
                                </a-form-model-item>
                                <a-form-model-item label="ICP备案序号">
                                    <a-input v-model="defaultSetData.keepRecord" />
                                </a-form-model-item>
                                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" class="align-center">
                                    <a-button type="primary" @click="basicSave">
                                        保存
                                    </a-button>
                                </a-form-model-item>
                            </a-form-model>
                        </a-col>
                    </a-row>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="导航">
                <div class="content-box">
                    <a-row>
                        <a-col :span="24">
                            <a-button type="primary" class="margin-bottom-10" @click="modalShow(1)">
                                添加导航
                            </a-button>
                        </a-col>
                        <a-col :span="12">
                            <a-table :columns="navColumns" :data-source="navDataSource" defaultExpandAllRows bordered>
                                <template slot="set" slot-scope="text,record,index">
                                    <a-icon type="edit" class="margin-right-20 cursor" @click="editNavData(record)" />
                                    <a-icon type="delete" class="cursor" @click="deleteNavData(record)" />
                                </template>
                            </a-table>
                        </a-col>
                    </a-row>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="栏目">
                <div class="content-box">
                    <a-row>
                        <a-col :span="24">
                            <a-button type="primary" class="margin-bottom-10" @click="modalShow(2)">
                                添加栏目
                            </a-button>
                        </a-col>
                        <a-col :span="12">
                            <a-table :columns="columnColumns" :data-source="navDataSource" bordered>
                                <template slot="set" slot-scope="text,record,index">
                                    <a-icon type="edit" class="margin-right-20 cursor" @click="editNavData(record)" />
                                    <a-icon type="delete" class="cursor" @click="deleteNavData(record)" />
                                </template>
                            </a-table>
                        </a-col>
                    </a-row>
                </div>
            </a-tab-pane>
            <a-tab-pane key="4" tab="页面横幅">
                <div class="content-box">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-model-item label="自定义背景颜色">
                                    <a-input type="color" v-model="defaultSetData.bgColor" />
                                </a-form-model-item>
                                <a-form-model-item label="自定义背景图">
                                    <!-- <a-input v-model="defaultSetData.bgImgUrl" />
                                    <div> -->
                                    <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="this.$Global.ApiBaseUrl + '/uploadFile'" :before-upload="beforeUpload" :headers="headersData" @change="handleChangeBgi">
                                        <img v-if="defaultSetData.bgImgUrl" :src="defaultSetData.bgImgUrl" width="108px" height="108px" alt="avatar" />
                                        <div v-else>
                                            <a-icon :type="loading ? 'loading' : 'plus'" />
                                            <div class="ant-upload-text">Upload</div>
                                        </div>
                                    </a-upload>
                                    <!-- </div> -->
                                </a-form-model-item>
                                <a-form-model-item label="横幅宽度">
                                    <a-input v-model="defaultSetData.bannerWidth" @keyup="()=>{defaultSetData.bannerWidth=defaultSetData.bannerWidth.replace(/[^\d.]/g,'')}" suffix="px" />
                                </a-form-model-item>
                                <a-form-model-item label="横幅高度">
                                    <a-input v-model="defaultSetData.bannerHeight" @keyup="()=>{defaultSetData.bannerHeight=defaultSetData.bannerHeight.replace(/[^\d.]/g,'')}" suffix="px" />
                                </a-form-model-item>
                                <a-form-model-item label="横幅显示方式">
                                    <a-radio-group :default-value="1" v-model="defaultSetData.bannerDisplayMode">
                                        <a-radio :value="1">
                                            图片
                                        </a-radio>
                                        <a-radio :value="2">
                                            视频
                                        </a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                                <a-form-model-item label="访问次数">
                                    <a-radio-group v-model="defaultSetData.isVisitsNumber">
                                        <a-radio :default-value="0" :value="1">
                                            显示
                                        </a-radio>
                                        <a-radio :value="0">
                                            不显示
                                        </a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" class="align-center">
                                    <a-button type="primary" @click="basicSave">
                                        保存
                                    </a-button>
                                </a-form-model-item>
                            </a-form-model>
                        </a-col>
                        <a-col :span="12">
                            <a-table :columns="bannerColumns" :data-source="bannerData" bordered>

                            </a-table>
                        </a-col>
                    </a-row>
                </div>
            </a-tab-pane>
            <a-tab-pane key="5" tab="模板选择">
                模板选择
            </a-tab-pane>
            <a-tab-pane key="6" tab="域名绑定">
                <div class="content-box">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-model-item label="域名绑定">
                                    <a-input v-model="defaultSetData.domainName" />
                                </a-form-model-item>
                                <a-form-model-item label="域名有效时间">
                                    <a-input v-model="defaultSetData.validityDate" />
                                </a-form-model-item>
                                <a-form-model-item label="我的域名">
                                    <a-input v-model="defaultSetData.websiteUrl" />
                                </a-form-model-item>
                                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" class="align-center">
                                    <a-button type="primary" @click="basicSave">
                                        绑定
                                    </a-button>
                                </a-form-model-item>
                            </a-form-model>
                        </a-col>
                    </a-row>
                </div>
            </a-tab-pane>
        </a-tabs>
        <!--导航新增修改弹窗-->
        <a-modal :title="activeKey==2?'导航信息':'栏目信息'" v-model="navVisible" @ok="addColmns" @cancel="()=>{navVisible=false}">
            <a-form-model :layout="'vertical'" :label-col="{span:5}" :wrapper-col="{span:14}">
                <a-form-model-item :label="activeKey==2?'导航名称':'栏目名称'">
                    <a-input v-model="navSaveData.name" />
                </a-form-model-item>
                <a-form-model-item :label="activeKey==2?'上级导航':'上级栏目'">
                    <a-tree-select v-model="navSaveData.parentName" @change="treeSelectChange" @search="onSearch" @select="onSelect" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="navTreeData" tree-default-expand-all>
                        <span v-if="key === '0-0-1'" slot="title" slot-scope="{ key, value }" style="color: #08c">
                            {{ navSaveData.parentName }}
                        </span>
                    </a-tree-select>
                </a-form-model-item>
                <a-form-model-item label="连接地址">
                    <a-input v-model="navSaveData.url" />
                </a-form-model-item>
                <a-form-model-item label="排序">
                    <a-input-number v-model="navSaveData.sort" />
                </a-form-model-item>
                <a-form-model-item label="备注">
                    <a-input type="textarea" v-model="navSaveData.remarks" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
import Api from "@/api/website/mySite"
import site from './mySite_mixins'

export default {
    mixins: [site],
    created () {
        this.basicGetData();
    },
    methods: {
        tabsCallback (key) {
            this.activeKey = key;
            if (this.activeKey == 2) {
                //导航
                this.lanmuType = 1;//类型
                this.navGetList();
            }
            if (this.activeKey == 3) {
                //栏目
                this.lanmuType = 2;//类型
                this.navGetList();
            }
        },
        basicSave () {
            //基本设置保存
            let requestData = this.defaultSetData;
            if (this.fileList.length == 1) {
                if (this.fileList[0].url) {
                    this.defaultSetData.logoUrl = this.fileList[0].url.toString();
                } else {
                    this.defaultSetData.logoUrl = this.fileList[0].response.url.toString();
                }
            } else {
                this.defaultSetData.logoUrl = null;
            }
            Api.savaDefault(requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        basicGetData () {
            //基本设置获取
            Api.getDefault().then(res => {
                if (res.code === 200) {
                    if (res.data) {
                        this.defaultSetData = res.data;
                        if (this.defaultSetData && this.defaultSetData.logoUrl) {
                            this.fileList = [
                                {
                                    uid: '-1',
                                    name: 'logo.png',
                                    status: 'done',
                                    url: this.defaultSetData.logoUrl,
                                }];
                        } else {
                            this.fileList = [];
                        }
                    }

                } else {
                    // this.$message.warning(res.message);
                }
            })
        },

    }
}
</script>
<style lang="scss" scoped>
    .website-wrapper {
        height: calc(100vh - 106px);
        border: 1px solid #ccc;
        margin: 10px;
        margin-top: 96px;
        .content-box {
            height: calc(100vh - 169px);
            overflow-y: auto;
            margin: 0 10px 0;
        }
    }
    .align-center {
        text-align: center;
    }
    .cursor {
        cursor: pointer;
    }
</style>